<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Daily draw</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.container {
				width: 100%;
				height: 100vh;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 20px;
			}
			.turntable {
				width: 50%;
				min-width: 300px;
			}
			.outer {
				position: relative;
			}
			.inner {
				width: 100%;
				padding-bottom: 70%;
			}
			.content {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #333;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30px;
			}
			.content-button {
				padding: 10px 20px;
				border: none;
				outline: none;
				cursor: pointer;
			}
			.main {
				margin-top: 40px;
				font-size: 20px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h2>每日抽奖</h2>
			<div class="turntable outer">
				<div class="inner"></div>
				<div class="content">
					<button class="content-button">点击抽奖</button>
					<div class="main">xxx</div>
				</div>
			</div>
		</div>

		<script>
			const data = [
				'暴躁芝士',
				'瑶兔叽',
				'虎纹章鱼',
				'唯优',
				'lulu大王',
				'suy',
				'西西西',
				'不眠小海',
				'千糖',
				'袁梦琪',
				'小玉很哇塞',
				'笨蛋小粉喵',
				'小瓜子',
				'小果果炖粥',
				'把小猫拷走',
				'yumekiii',
				'嗯嗯是我',
				'九成美',
				'齿酱'
			];

			const btn = document.querySelector('.content-button');
			const mainContent = document.querySelector('.main');

			function random(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
			let timer;
			btn.onclick = function () {
				let n = 0;
				timer = setInterval(() => {
					n += 1;
					const result = random(0, data.length);
					mainContent.textContent = data[result];
					if (n === 10) {
						clearInterval(timer);
					}
				}, 300);
			};
		</script>
	</body>
</html>
